<template>
    <div class="login_wrapper" style="background-image:url('./../assets/images/common/add.png')">
        <a href="/assets/home/mark-page/?taskId=CDF5F86585594DF58E45CD134CEF6737&markTaskId=B06636218B51409885E0607D62684ADF&tabName=%E6%A0%87%E6%B3%A8">ssdsdsd</a>
        <div class="login">
            <input v-model="username" type="text" placeholder="账号" maxlength="50" class="lg_ipt" />
            <input v-model="password" type="password" placeholder="密码" maxlength="50" class="lg_ipt" />
            <button @click="loginPlay">登录</button>
            <!--   <div class="unable_login">无法登录</div>-->
        </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";

let Base64 = require("js-base64").Base64;
export default {
    name: "Login",
    data() {
        return {
            username: "447134002@qq.com",
            password: "abk123456"
            // username: "447134003@qq.com",
            // password: "abk123456"
            // username: "15158065645",
            // password: "hssmc93107"
        };
    },
    created: function() {},
    methods: {
        ...mapActions(["loginAction"]),
        loginPlay() {
            if (!this.checkInfo()) return; // 校验输入
            let self = this;
            this.ass_api
                .loginPage(
                    this.Utils.RSAencrypt(
                        {
                            account: this.username,
                            password: Base64.encode(this.password)
                        },
                        true
                    )
                )
                .then(data => {
                    if (data.rt.status == 200) {
                        self.Utils.setCookie("sid", data.data.sid, 1000);
                        this.loginAction(data)
                        console.log(data, 'shemwewayi adkjh');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        checkInfo() {
            if (!this.username) {
                this.$Message.error("请输入账号");
                return false;
            }
            if (!this.password) {
                this.$Message.error("请输入密码");
                return false;
            }
            return true;
        },
        //当前页面跳转
        linkTo: function() {}
    }
};
</script>
<style scoped lang="less">
.login_wrapper {
    width: 100%;
    height: 100%;
    background-color: rgba(243, 245, 248, 1);
    .login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 343px;
        height: 320px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 4px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.149019607843137);
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.647058823529412);
        text-align: left;
        margin-left: -343 / 2px;
        margin-top: -160px;
        padding: 0 21px;
        box-sizing: border-box;
        z-index: 9;
    }
    .lg_ipt {
        width: 300px;
    }
    .tlt1 {
        width: 100%;
        text-align: center;
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        line-height: 22px;
        margin-top: 44px;
        cursor: pointer;
        padding: 4px 0 30px 0;
    }
    .unable_login {
        text-align: center;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #5886b0;
        line-height: 21px;
        margin-top: 30px;
        cursor: pointer;
    }
}
</style>
<style lang="less">
.login_wrapper {
    .lg_ipt {
        width: 300px;
        margin-bottom: 24px;
        box-sizing: border-box;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.247058823529412);
        text-align: left;
        line-height: 24px;
    }
}
</style>
